<template>
	<div class="base-info-content">
		<el-form ref="ruleFormRef" :model="goodsInfoData" :rules="rules" label-width="150px">
			<el-form-item label="商品规格：" class="pt10">
				<section style="display: flex; flex-direction: column;">
					<el-col v-for="(item, index) of goodsInfoData.specList" :key="index" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<section class="specItemBox">
							<el-input v-model="item.name" class="width180" placeholder="请输入规格名称"  />
							<el-icon size="20" color="#999" class="close-tag" @click="delSpec(index)">
								<CircleCloseFilled />
							</el-icon>
						</section>
						<div class="ml20 mt15 flex">
							<span style="border-left: 1px solid #cdd0d6;border-bottom: 1px solid #cdd0d6;width: 20px;height: 20px;margin-right: 20px"></span>
							<section class="flex" style="flex-wrap: wrap;">
								<section class="mr20 mb20 specItemBox" style="position: relative;width: min-content;" v-for="(item1, index1) of item.childItem" :key="index1">
									<el-input v-model="item1.name" class="width180" placeholder="请输入规格值" />
									<el-icon size="20" color="#999" class="close-tag" @click="delSpecItem(index,index1)">
										<CircleCloseFilled />
									</el-icon>
								</section>
								<el-button type="primary" @click="addSpecItemChildFun(index)">添加规格值</el-button>
							</section>
						</div>
					</el-col>
					<el-col :span="24" class="mb20">
						<el-button type="primary"  @click="addSpecFun">添加规格项</el-button>
						<el-button type="primary"  @click="tplDialogFun()">快捷模板</el-button>
					</el-col>
				</section>
			</el-form-item>
			<el-form-item label="" v-if="goodsInfoData.skuList.length > 0">
				<section style="display: flex; flex-direction: column;width:100%;background:var(--el-color-primary-light-9)">
					<el-row>
						<el-col :span="24" class="batchSettingsBox px15 mx10" style="background:var(--el-color-white);width: 100%;flex: auto;">
							<div style="display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
									<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
									<label class="font14">零售价</label>
								</div>
							</div>
							<div style=" display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>划线价</label>
								</div>
							</div>
							<div style=" display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>最低价</label>
								</div>
							</div>
							<div style=" display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>成本价</label>
								</div>
							</div>
							<div style=" display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>商品单位</label>
								</div>
							</div>
							<div style=" display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>库存</label>
								</div>
							</div>
							<div style=" display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>预警库存</label>
								</div>
							</div>
							<div style="display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>虚拟销量</label>
								</div>
							</div>
							<div style=" display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>商家编码</label>
								</div>
							</div>
							<div style=" display: flex;justify-content: flex-start;">
								<div class="input-wrapper">
								<input v-model="state.batchSettingsTable[0].retailPrice" placeholder="" />
								<label>可用次数</label>
								</div>
							</div>
							<div style="display: flex;justify-content: flex-start;">
								<el-button style="height: 35px;padding:0 20px;" type="primary" @click="batchSettingFun()">批量设置</el-button>
							</div>
						</el-col>
					</el-row>
				</section>
			</el-form-item>
			<!-- <el-form-item label="批量设置：" v-if="goodsInfoData.skuList.length > 0">
				<el-table :data="state.batchSettingsTable" border style="width: 100%" 
					:header-cell-style="{ textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
					<el-table-column label="图片" align="center" width="80">
						<template #default="scope">
							<section style="display: inline-block;" @click="addImg('piliangImgUrl', 0 ,scope.$index)">
								<el-image v-if="scope.row.skuImgUrl != '' && scope.row.skuImgUrl != null"
									style="width:32px; height: 32px;border-radius: 5px;" :src="scope.row.skuImgUrl" fit="cover" />
								<section v-else class="selector-img" style="width:32px; height: 32px;border-radius: 5px;" >
									<el-icon size="32" color="#999" style="width:32px; height: 32px;border-radius: 5px;" >
										<Plus />
									</el-icon>
								</section>
							</section>
						</template>
					</el-table-column>
					<el-table-column label="零售价" align="center">
						<template #default="scope">
							<el-input v-model="scope.row.retailPrice" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="划线价">
						<template #default="scope">
							<el-input v-model="scope.row.referencePrice" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="最低价">
						<template #default="scope">
							<el-input v-model="scope.row.lowPrice" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="成本价">
						<template #default="scope">
							<el-input v-model="scope.row.costPrice" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="商品单位">
						<template #default="scope">
							<el-input v-model="scope.row.unit" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="库存">
						<template #default="scope">
							<el-input v-model="scope.row.stock" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="预警库存">
						<template #default="scope">
							<el-input v-model="scope.row.warnStock" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="线下销量">
						<template #default="scope">
							<el-input v-model="scope.row.offlineSales" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="商家编码">
						<template #default="scope">
							<el-input v-model="scope.row.merchantCode" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="商品条码" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.barCode" placeholder="请输入" />
						</template>
					</el-table-column>
					<el-table-column label="关联商品" width="150">
						<el-button link type="primary" @click="relevanceGoods(99999)">关联商品</el-button>
					</el-table-column>
					<el-table-column label="操作" width="150">
						<el-button text type="primary" @click="batchAdd">
							批量添加
						</el-button>
						<el-button text type="primary" >
							清空
						</el-button>
					</el-table-column>
				</el-table>
			</el-form-item> -->
			<el-form-item label="商品属性：" v-if="goodsInfoData.skuList.length > 0">
				<el-table :data="goodsInfoData.skuList" border
					:header-cell-style="{ textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="图片" align="center">
						<template #default="scope">
							<section style="width:32px; height: 32px;display: inline-block;" @click="addImg('skuImgUrl', 0, scope.$index)">
								<el-image v-if="scope.row.skuImgUrl != '' && scope.row.skuImgUrl != null"
									style="width:32px; height: 32px;border-radius: 5px;" :src="scope.row.skuImgUrl" fit="cover" />
								<section v-else class="selector-img" style="width:32px; height: 32px;border-radius: 5px;">
									<el-icon size="32" color="#999" style="width:32px; height: 32px;border-radius: 5px;" >
										<Plus />
									</el-icon>
								</section>
							</section>
						</template>
					</el-table-column>
					<el-table-column label="商品属性" show-overflow-tooltip>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.skuType`" 
								:rules="[{ required: true, message: '请选择', trigger:'change'}]">
								<el-select v-model="scope.row.skuType" placeholder="请选择" style="width: auto;">
									<el-option v-for="item of props.skuAttrTypeList" :label="item.dictName" :value="item.dictValue" :key="item.dictValue" />
								</el-select>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="零售价" show-overflow-tooltip>
						<template v-slot:header>
							零售价
							<el-popover placement="top-start" trigger="hover"
								content="商品销售价格">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.retailPrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.retailPrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="划线价" show-overflow-tooltip v-if="goodsInfoData.salesChannel.includes(2)">
						<template v-slot:header>
							划线价
							<el-popover placement="top-start" trigger="hover"
								content="线上展示使用，建议填写商品指导价">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.referencePrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.referencePrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="最低价" show-overflow-tooltip v-if="goodsInfoData.salesChannel.includes(1)">
						<template v-slot:header>
							最低价
							<el-popover placement="top-start" trigger="hover"
								content="商品控价价格，低于该价格商品禁止销售">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.lowPrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.lowPrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="成本价" show-overflow-tooltip>
						<template v-slot:header>
							成本价
							<el-popover placement="top-start" trigger="hover"
								content="商品成本价格，用来核算商品利润，不填写则无法核算利润">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.costPrice`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}, { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入正确的金额', trigger: 'blur' }]">
								<el-input v-model="scope.row.costPrice" placeholder="请输入" >
									<template #append>
										<span>元</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="库存" show-overflow-tooltip v-if="goodsInfoData.salesChannel.includes(2)">
						<template v-slot:header>
							库存
							<el-popover placement="top-start" trigger="hover"
								content="系统支持0库存门店销售。但商品库存为0时，线上将无法销售">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.stock`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'},{ pattern: /^[1-9]\d*$/, message: '请输入正确的库存', trigger: 'blur' }]">
								<el-input v-model="scope.row.stock" placeholder="请输入" ></el-input>
							</el-form-item>
						</template>
					</el-table-column>
					
					<el-table-column prop="address" label="操作">
						<template #default>
							<el-button text type="primary" >
								移除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
			<el-form-item label="其它属性：" v-if="goodsInfoData.skuList.length > 0">
				<el-table :data="goodsInfoData.skuList" border style="width: 100%"
					:header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
					<el-table-column v-for="(item, index) of goodsInfoData.specList" :prop="item.key"
						:label="item.name" :key="index" width="100">
						<template #default="scope">
							<span>{{ scope.row.skuSpecList[index].name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="商品单位" show-overflow-tooltip>
						<template v-slot:header>
							商品单位
							<el-popover placement="top-start" trigger="hover"
								content="商品标准数量单位，一般为：件、套、个、盒、瓶等">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.unit`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'}]">
								<el-input v-model="scope.row.unit" placeholder="请输入" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="预警库存" show-overflow-tooltip>
						<template v-slot:header>
							预警库存
							<el-popover placement="top-start" trigger="hover"
								content="商品库存警戒值，等于低于该值时，需要及时补货，避免缺货">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.warnStock`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'},{ pattern: /^[1-9]\d*$/, message: '请输入正确的库存', trigger: 'blur' }]">
								<el-input v-model="scope.row.warnStock" placeholder="请输入" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="线下销量" show-overflow-tooltip v-if="goodsInfoData.salesChannel.includes(2)">
						<template v-slot:header>
							线下销量
							<el-popover placement="top-start" trigger="hover"
								content="线上销量展示使用，可以填写商品在线下渠道或其他渠道的总销量">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.offlineSales`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'},{ pattern: /^[1-9]\d*$/, message: '请输入正确的销量', trigger: 'blur' }]">
								<el-input v-model="scope.row.offlineSales" placeholder="请输入" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="理论可用次数" show-overflow-tooltip>
						<template v-slot:header>
							理论可用次数
							<el-popover placement="top-start" trigger="hover"
								content="以单次用量为标准，算出此商品理论可用次数。例如商品50g，单次用量5个，则理论使用次数为10次">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item>
								<el-input v-model="scope.row.usableTimes" placeholder="请输入" >
									<template #append>
										<span>次</span>
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="商家编码" show-overflow-tooltip>
						<template v-slot:header>
							商家编码
							<el-popover placement="top-start" trigger="hover"
								content="商家给商品设定的编码，方便商品入库发货等操作">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.merchantCode`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'},{ pattern: /^[0-9]{12}$/, message: '请输入13位商家编码', trigger: 'blur' }]">
								<el-input v-model="scope.row.merchantCode" placeholder="请输入" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="商品条码" show-overflow-tooltip>
						<template v-slot:header>
							商品条码
							<el-popover placement="top-start" trigger="hover"
								content="商品条形码">
								<template #reference>
									<el-icon><QuestionFilled /></el-icon>
								</template>
							</el-popover>
						</template>
						<template v-slot="scope">
							<el-form-item :prop="`skuList.${scope.$index}.barCode`" 
								:rules="[{ required: true, message: '请输入', trigger:'blur'},{ pattern: /^[0-9]{12}$/, message: '请输入13位商家编码', trigger: 'blur' }]">
								<el-input v-model="scope.row.barCode" placeholder="请输入" />
							</el-form-item>
						</template>
					</el-table-column>
					<el-table-column label="关联商品">
						<template #default="scope">
							<el-button link type="primary" @click="relevanceGoods(scope.$index)">关联商品</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="操作">
						<template #default>
							<el-button text type="primary" >
								移除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-form-item>
		</el-form>
		<section style="text-align: center; margin: 10px 0;">
			<el-button type="primary" @click="previousStep">上一步</el-button>
			<el-button type="primary" @click="nextStep(ruleFormRef)">下一步</el-button>
		</section>
		<AddInformation @selectFun="selectFun" ref="addInformationRef" />
		<relevanceGoodDialog @selectItemFun="selectItemFun" ref="relevanceGoodDialogRef" />
		<tplDialog @selectSpecFun="selectSpecFun" ref="tplDialogRef" />
	</div>
</template>

<script setup lang="ts" name="funWangEditor">
import { reactive, ref, onMounted, defineAsyncComponent } from 'vue';
import { Plus,CircleCloseFilled,QuestionFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules} from 'element-plus'
import '/@/theme/tableTool.scss';
import { templateList} from "/@/api/commodity";
import { ElMessage } from 'element-plus';
import { goodsInfo } from '/@/stores/goods';
const goodsInfoData = goodsInfo()
const AddInformation = defineAsyncComponent(() => import('/@/components/information/AddInformation.vue'))
const relevanceGoodDialog = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/relevanceGoodDialog.vue'))
const tplDialog = defineAsyncComponent(() => import('/@/views/commodity/goodList/components/tplDialog.vue'))
const addInformationRef = ref()
const relevanceGoodDialogRef = ref()
const tplDialogRef = ref()
const emit = defineEmits(['stepChange'])
const ruleFormRef = ref<FormInstance>()
// 定义父组件传过来的值
const props = defineProps({
	// 类型下对应属性
	skuAttrTypeList: {
		type: Array,
	}
});
const state = reactive({
	addFileType: '',
	operateIndex:0,
	// 可用模板列表
	specTemplateList: [] as Array<any>,
	batchSettingsTable: [{
		skuImgUrl:'',
		retailPrice: null,
		referencePrice:null,
		lowPrice:null,
		costPrice:null,
		unit: '',
		stock: null,
		warnStock: null,
		offlineSales:null,
		merchantCode:null,
		barCode:null,
		relatedSku: [] as Array<any>,
	}] as Array<any>,
})

const rules = reactive<FormRules<any>>({
})

// 获取可用模板
const getTemplateList = async () => {
	let param = {
		pageNum:1,
		pageSize:100,
		typeId: 1,
	}
	const { results } = await templateList(param);
	state.specTemplateList = results.records
}


// 图片选中
const addImg = (type: string, isArr: Number, index?: number) => {
	state.addFileType = type;
	if(index != undefined){
		state.operateIndex = index;
	}
	addInformationRef.value.openDialog(isArr)
}

// 图片选中回调
const selectFun = (fileList: any) => {
	console.log()
	if (state.addFileType == 'piliangImgUrl') {
		state.batchSettingsTable[0].skuImgUrl = fileList[0]
	} else if (state.addFileType == 'skuImgUrl') {
		goodsInfoData.skuList[state.operateIndex].skuImgUrl = fileList[0]
	}
}
// 关联商品
const relevanceGoods = (index:number)  => {
	state.operateIndex = index;
	if(index == 99999){
		relevanceGoodDialogRef.value.openDialog('goodsRelatedSku',state.batchSettingsTable[0].relatedSku,goodsInfoData.spuType);
	}else{
		relevanceGoodDialogRef.value.openDialog('goodsRelatedSku',goodsInfoData.skuList[index].giveGoods.ruleList,goodsInfoData.spuType);
	}
}

// sku管理商品回调
const selectItemFun = (type:String,list:any)  => {
	if(state.operateIndex == 99999){ //批量商品
		state.batchSettingsTable[0].relatedSku = list;
	}else if(type == 'goodsRelatedSku'){
		const listA = list.map((item:any) =>{
			return {
				data:item.data,
				itemId: item.data.skuId,
				itemName: item.data.spuName,
				itemNum: null
			}
		})
		goodsInfoData.skuList[state.operateIndex].giveGoods = {
			// selectId:null,
			ruleList:listA
		};
	}
}

// 打开选择模板
const tplDialogFun = () => {
	tplDialogRef.value.openDialog(1)
}

// 选中模板后获取模板内规格项
const selectSpecFun = (tmpData:any) => {
	goodsInfoData.specList = tmpData;
	console.log(goodsInfoData.specList)
	creatSkuList();
};

// 添加规格项
const addSpecFun = () => {
	const item = { name:'#', childItem: [ { id:null, name:'#'}]};
	goodsInfoData.specList.push(item);
	creatSkuList();
}

// 移除某一种规格组
const delSpec = (x:number) => {
	goodsInfoData.specList.splice(x,1)
	creatSkuList();
}

// 移除规格中某一项规格
const delSpecItem = (x:number,y:number)=>{
	goodsInfoData.specList[x].childItem.splice(y,1)
	creatSkuList();
}

// 给规格项中某一项添加规格
const addSpecItemChildFun = (x:number)=>{
	goodsInfoData.specList[x].childItem.push({name:'#'})
	creatSkuList();
}

// 创建商品规格列表
const creatSkuList = async () => {
	const attr = goodsInfoData.specList;
	const skus = calculateCartesianProduct(attr).map((product: any[]) => {  
		const sku = JSON.parse(JSON.stringify(goodsInfoData.multipleData));
		sku.skuSpecList = [];
		product.forEach((value: any) => {  
			sku.skuSpecList.push(value)
		});
		return sku;
	});
	goodsInfoData.skuList = skus;
}

// 多规格生成
const calculateCartesianProduct = (attr:any) =>{
	if (attr.length === 0) {
		return [[]]; // 返回一个空数组，表示没有属性可选
	} else {
		const firstAttribute = attr[0];
		const remainingAttributes = attr.slice(1);
		const firstAttributeValues = firstAttribute.childItem;
		const remainingProduct = calculateCartesianProduct(remainingAttributes);
		return firstAttributeValues.flatMap((value: any) => remainingProduct.map((product: any) => [value].concat(product)));
	}
}

// 批量添加数据
const batchAdd = () =>{
	if(goodsInfoData.skuList.length > 0){
		goodsInfoData.skuList.map((obj:any) =>{
			// let batchData = state.batchSettingsTable[0]
			// obj.skuImgUrl = batchData.skuImgUrl;
			// obj.retailPrice = batchData.retailPrice;
			// obj.referencePrice = batchData.referencePrice;
			// obj.lowPrice = batchData.lowPrice;
			// obj.costPrice = batchData.costPrice;
			// obj.unit = batchData.unit;
			// obj.stock = batchData.stock;
			// obj.warnStock = batchData.warnStock;
			// obj.offlineSales = batchData.offlineSales;
			// obj.merchantCode = batchData.merchantCode;
			// obj.barCode = batchData.barCode;
			// obj.relatedSku = obj.relatedSku.length == 0 ? batchData.relatedSku : obj.relatedSku;
		})
	}else{
		ElMessage({
			type: 'warning',
			message: '请先添加规格项',
		})
	}
}

// 页面加载时
onMounted(() => {
	// 获取规格模板列表
	getTemplateList();
});

// 上一步
const previousStep = () => {
	emit('stepChange', 'first')
}

// 下一步
const nextStep = async (formEl: FormInstance | undefined) => {
	if(goodsInfoData.skuList.length == 0){
		return ElMessage.warning('暂无商品规格');
	}
	if (!formEl) return
	await formEl.validate((valid) => {
		if (valid) {
			emit('stepChange', 'third')
		} else {
			ElMessage.warning('请补全商品信息');
		}
	})
}

</script>

<style lang="scss" scoped>
.base-info-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-form{
		flex:1;
		overflow-y: auto;
		position: relative;
	}
	.form-ele-size {
		width: 260px;
	}

	.line-title {
		font-size: 18px;
		padding: 8px 12px;
		background-color: #eceef0;
		border-radius: 6px;
		margin-bottom: 15px;
	}

	.selector-img {
		width: 64px;
		height: 64px;
		border: 1px solid #ededed;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		&:hover {
			background-color: #f5f5f5;
			border: 1px solid #e4e3e3;
		}
	}
	.specItemBox{
		position: relative;
		width: min-content
	}
	.specItemBox .close-tag{
		position: absolute;
		cursor: pointer;
		top:-6px; 
		right:-6px;
		display: none;
	}

	.specItemBox:hover .close-tag {
		display: inline; /* 鼠标悬浮时显示关闭标签 */
	}

	.batchSettingsBox {
      display: flex;
      justify-content: flex-start;
      .input-wrapper {
        position: relative;
        width: 100px;
        height: 35px;
        line-height: 35px;
        margin-right: 10px;
        box-sizing: border-box;
		label{
			height:18px;
			color: var(--el-color-primary);
			background:var(--el-color-white)
		}
      }

      input {
        border: none;
        background: none;
        width: 100px;
        height: 35px;
        font-size: 18px;
        border-radius: 4px;
        border: 1px solid var(--el-color-primary) !important;
        outline: none;
      }
      label {
        position: absolute;
        top: 2px;
        left: 20px;
        font-size: 16px;
        color: #FFF;
        pointer-events: none;
        transition: 0.2s ease all;
      }

      input:focus+label,
      input:not(:placeholder-shown)+label {
        top: -10px;
        left: 8px;
        font-size: 14px;
        border-color: #007acc;
        color: #2D8CF0 !important;
		height:18px;
		line-height:18px;
      }
    }
}
</style>
